<!--<s-goods-list :goodsList="goodsList" :loadStatus="loadStatus" :showCart="false"></s-goods-list>-->

<template>
    <view>
        <view class="product-list">
            <view class="product-container">
                <view v-for="(item,index) in goodsList" :key="index" class="product-item" @click="goDetail(item)">
                    <image :src="item.urlLink.split(',')[0]" mode="aspectFill" class="product-image"></image>
                    <view class="product-info">
                        <view class="product-title">{{ item.name }}</view>
                        <!-- <view class="price-section" v-if="isVip">
                                  <text class="price">¥{{item.vipPrice}}</text>
                                  <text class="original-price">¥{{item.price}}</text>
                                </view>
                                <view class="price-section" v-else>
                                  <text class="price">¥{{item.price}}</text>
                                </view> -->
                        <view class="price-section">
                            <view>售价: <text class="price">¥{{ item.price }}</text></view>
                            <view class="price-vip">VIP：¥{{ item.vipPrice }}</view>
                        </view>
                        <view class="sales">已服务单量：{{ item.num }}</view>
                        <view class="add-cart" @click.stop="addToCart(item)" v-if="showCart">
                            <u-icon name="shopping-cart" size="30" color="#EB6121"></u-icon>
                        </view>
                        <view v-if="showReservation" class="dis_f_r_c">
                            <view>
                                <u-button type="primary" size="small" @click="handleShowOrder(item)">指定</u-button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <s-empty class="p_t_20" v-if="goodsList.length == 0"/>
        <!--    <u-loadmore :status="loadStatusList[loadStatus]" loadmoreText="上拉或点击加载更多" color="#aaa" line />-->
        <u-popup :show="showOrder" closeable @close="showOrder=false" mode="bottom">
            <view class="p_20">
                <view class="dis_f_c_c">订单确认</view>
                <u--form labelPosition="left" labelWidth="auto" :model="model1" :rules="rules" ref="uForm">

                    <u-form-item prop="userInfo.phone" ref="item1" label="手机号">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.phone" placeholder="请填写手机号" border="none"></u-input>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.gameIdNo" ref="item1" label="游戏ID">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.gameIdNo" placeholder="请填写游戏ID" border="none"></u-input>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.gameAreaType" ref="item1" label="游戏区服">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-radio-group
                                v-model="model1.userInfo.gameAreaType"
                                placement="row"
                                @change="groupChange"
                            >
                                <u-radio
                                    :customStyle="{marginRight: '8px'}"
                                    v-for="(item, index) in radiolist"
                                    :key="index"
                                    :label="item"
                                    :name="item"
                                >
                                </u-radio>
                            </u-radio-group>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.remark" ref="item1" label="备注">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.remark" placeholder="请填写备注" border="none"></u-input>
                        </view>
                    </u-form-item>
                </u--form>
                <view class="m_t_10">
                    <u-button type="primary" @click="handleConfirm">提交</u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {addCartApi, postAddOrderApi} from "@/sheep/api/index.js";
export default {
    props: {
        goodsList: {
            type: Array,
            default: () => [],
        },
        loadStatus: {
            type: Number,
            default: 0,
        },
        showCart: {
            type: Boolean,
            default: true,
        },
        showReservation: {
            type: Boolean,
            default: false,
        },
        waiterId: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            loadStatusList: ["loadmore", "loading", "nomore"],
            showOrder:false,
            radiolist: [],
            model1: {
                userInfo: {
                    phone: "",
                    gameIdNo: "",
                    remark: "",
                    gameAreaType: "",
                },
            },
            rules: {
                "userInfo.phone": {
                    type: "string",
                    required: true,
                    message: "请输入手机号",
                    trigger: ["blur", "change"],
                },
                "userInfo.gameIdNo": {
                    type: "string",
                    required: true,
                    message: "请输入游戏ID",
                    trigger: ["blur", "change"],
                },
                "userInfo.gameAreaType": {
                    type: "string",
                    required: true,
                    message: "请选择游戏区服",
                    trigger: ["blur", "change"],
                }
            },
        };
    },
    methods: {
        goDetail(item) {
            if (!this.showReservation){
                uni.navigateTo({
                    url: "/pages/index/info?goodsId=" + item.goodsId,
                });
            }

        },
        addToCart(item) {
            let cartForm = {
                goodsMallId: item.goodsId,
                isAdd: 1,
            };
            addCartApi(cartForm).then((res) => {
                if (res.code == 200) {
                    uni.showToast({
                        title: "已加入购物车",
                        icon: "success",
                    });
                }
            });
        },
        groupChange(n) {
            this.model1.userInfo.gameAreaType = n;
        },
        handleShowOrder(item){
            this.radiolist = item.gameArea.split('-');
            this.model1.userInfo.goodsId = item.goodsId;
            this.showOrder = true;
        },
        handleConfirm() {
            this.$refs.uForm.validate().then((res) => {
                this.model1.userInfo.waiterId = this.waiterId;
                postAddOrderApi(this.model1.userInfo).then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: "none",
                    });
                    if (res.code == 200) {
                        this.showOrder = false;
                        //延迟两秒
                        setTimeout(() => {
                            uni.navigateTo({
                                url: "/pages/order/index",
                            });
                        },2000)
                    }
                });
            });
        },
    },
};
</script>

<style scoped lang="scss">
.product-list {
    margin-top: 20rpx;
    //   padding: 0 20rpx;

    .product-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .product-item {
            width: 46vw;
            background-color: #fff;
            border-radius: 12rpx;
            overflow: hidden;
            margin-bottom: 20rpx;
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

            .product-image {
                width: 100%;
                height: 345rpx;
            }

            .product-info {
                padding: 20rpx;
                position: relative;

                .product-title {
                    font-size: 32rpx;
                    color: #333;
                    line-height: 36rpx;
                    height: 72rpx;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    margin-bottom: 10rpx;
                }

                .price-section {
                    display: flex;
                    // align-items: center;
                    flex-direction: column;
                    font-size: 30rpx;

                    .price {
                        font-size: 34rpx;
                        color: #eb6121;
                        font-weight: bold;
                        margin-left: 10rpx;
                    }

                    .price-vip {
                        font-size: 30rpx;
                        background-color: #eb6121;
                        color: #fff;
                        padding: 4rpx 10rpx;
                        border-radius: 4rpx;
                        margin: 10rpx 0;
                        width: fit-content;
                    }

                    .original-price {
                        font-size: 24rpx;
                        color: #999;
                        text-decoration: line-through;
                        margin-left: 10rpx;
                    }
                }

                .sales {
                    font-size: 22rpx;
                    color: #999;
                    margin-top: 8rpx;
                }

                .add-cart {
                    position: absolute;
                    right: 20rpx;
                    bottom: 20rpx;
                    width: 50rpx;
                    height: 50rpx;
                    border-radius: 50%;
                    // background-color: #9b461e;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
}
</style>
